/*
 * @Author: ""
 * @Date: 2023-06-12 18:17:40
 * @LastEditors: Yejing
 * @LastEditTime: 2023-06-12 18:18:46
 * @Description: 删除样式fixed
 */
<template>
	<view :style="{ height: $u.addUnit(statusBarHeight, 'px'),zIndex:isFixed?zIndex:1,background:background }"
		class="cl-status__bar" :class="{'cl-status__bar-fixed':isFixed}">
		<slot />
	</view>
</template>

<script>
	export default {
		name: "statusBar",
		emits: ['init'],
		props: {
			//背景色
			background: {
				type: String,
				default: 'transparent'
			},
			//是否固定在顶部
			isFixed: {
				type: Boolean,
				default: true
			},
			//z-index值，isFixed为true时生效
			zIndex: {
				type: Number,
				default: 998
			},
			barStyle: {
				type: String,
				default: 'white'
			}
		},
		computed: {
			statusBarHeight() {
				return this.$store.getters.homePageWindowInfo.statusBarHeight
			}
		},
		watch: {
			barStyle: {
				handler(newValue) {
					let value = "white";
					if (value == 'black' && value == 'white') {
						value = newValue;
					}
					uni.setNavigationBarColor({
						frontColor: value, // 导航栏标题颜色，只能是'black'或'white'
					});
				},
				immediate: true
			}
		}
	}
</script>

<style scoped>
	.cl-status__bar {
		flex: 1;
		width: 100vw;
		height: 20px;
		overflow: hidden;
	}

	.cl-status__bar-fixed {
		left: 0;
		top: 0;
	}
</style>